
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
<div id="app">
  <div>
    <h1>demo11</h1>
    <div style="text-align: left">
      <div v-for="(item, i) in formTitle" style=";width: 100px ;display: inline-block;height: 50px;position: relative" >
        <input type="text" v-model="formTitle[i]"  @input="changeTitle($event,i)" style=";width: 100px ;display: inline-block;height: 50px">
        <img style="width: 20px;height: 20px;position: absolute;top: 0px;right: 0px; "
             src="./image/delet.png" @click="deleteTitle(i)"/>
      </div>
      <button style="width: 50px ;display: inline-block;font-size: 30px; " @click="addCloumn">
        +
      </button>
      <div v-for="(item, i) in formData" style="display: flex;">
        <div v-for="(ite, index) in formTitle" style="position: relative;width: 100px ;display: inline-block;height: 50px; ">
          <input type="text" v-model="formData[i][index]"  @input="changeData($event,i,index)"
                 style="width: 100px ;display: inline-block;height: 50px">
          <img v-if="index==0" style="width: 20px;height: 20px;position: absolute;top: 0px;right: 0px; "
               src="./image/delet.png" @click="deleteData(i,index)"/>
        </div>
      </div>
      <button @click="addRow" style="width: 50px ;display: inline-block;font-size: 30px; ">
        +
      </button>
    </div>
  </div>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      formTitle: ['name', 'sex', 'age'],
      formData: [[ "tom",  '男',  12], [ "lili", '女' , 14]],
      tableData: {
        formData: this.formData,
        formTitle: this.formTitle
      },
    },
    methods:{
      deleteTitle(i){
        this.formTitle.splice(i,1)
        this.formData.forEach(item=>{
          item.splice(i,1)
        })
      },
      deleteData(i){
        this.formData.splice(i,1)

      },
      changeTitle(event, i) {
        this.formTitle.splice(i,1,event.currentTarget.value)
      },
      changeData(event, i,index) {
        let data=this.formData[i]
        data[index]=event.currentTarget.value;
        this.formData.splice(i,1,data)
      },
      addCloumn() {
        this.formTitle.push("请输入标题")
      },
      addRow() {
        this.formData.push({})
      }
    }
  })
</script>
</body>
